<template>
	<view>
		<!-- 透明渐变头部组件 -->
		<view :style="{
			opacity: num,
			backgroundColor: backgroundColor
		}" class="nav">
			<slot>

			</slot>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 0, //透明度
				statusBarHeight: 0
			}
		},
		props: {
			title: {
				type: [String],
				default: '标题'
			},
			backgroundColor: {
				type: [String],
				default: '#FFFFFF'
			},
			offSet: {
				type: Number,
				default: 0
			},
			height: {
				type: [String, Number],
				default: 0
			},
		},
		watch: {
			offSet(num, oldValue) {
				if (num >= 70 && num <= 100) {
					//num =0 就是完全透明  1是不透明
					this.num = 0.2
				}
				//越往下滑动 透明度越低
				if (num >= 101 && num <= 120) {
					this.num = 0.3
				}
				if (num >= 120 && num <= 150) {
					this.num = 0.5
				}
				if (num >= 150 && num <= 170) {
					this.num = 0.7
				}
				if (num >= 170 && num <= 190) {
					this.num = 1
				}
				if (num > 190) {
					this.num = 1
				}
				//距离小于多少就不显示了
				if (num <= 70) {
					this.num = 0
				}
			}
		},
		scroll(e) {
			console.log(e)
		},

		methods: {

		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight
			 }
			});
		},
		computed: {
			heightPx() {
				return uni.upx2px(this.height)
			}
		}
	}
</script>

<style>
	.nav {
		/* padding-top: var(--status-bar-height); */
		background-color: #8F8F94;
		position: fixed;
		z-index: 99;
		left: 0;
		right: 0;
		top: 0;
		/* 设置位置 */
	}
</style>
